<script>
	/* global utils */
	/**
	 * @author 唐国雄
	 * 扩展iview组件Table
	 * 列宽值扩展:
	 * 		数值表示固定宽度px,百分比表示占总宽的百分比,fr表示剩余宽度的权重
	 * 控件高度可以通过内联样式设置
	 * 属性----------------------
	 * :cache		离线存储的键(保证唯一)
	 */
	import SizeObserver from './SizeObserver';
	import Vue from 'vue';
	/**
	 * 扩展iview组件Table
	 */
	const table={
		extends:Vue.component('iTable'),
		watch:{
			showVerticalScrollBar(val){
				this.handleResize();
				this.$emit('y-scroll-bar',val);
			}
		}
	};
	export default{
		name:'TablePowerful',
		components:{
			SizeObserver
		},
		inheritAttrs:false,
		props:{
			columns:Array,
			cache:{
				type:String,
				default:'default'
			}
		},
		data(){
			return {
				height:0,
				width:0,
				// 是否存在垂直滚动条
				yScrollBar:false,
				// 宽度列表生成器
				calcColumnWidthFn:utils.getCalcColumnWidthFn(this.columns.map(function(ele){
					return ele.width;
				}))
			};
		},
		computed:{
			calcColumns(){
				let width;
				if(this.yScrollBar){
					width=this.width-this.$refs.table.scrollBarWidth-2;
				}else{
					width=this.width-2;
				}
				const columnWidths=this.calcColumnWidthFn(width);
				return this.columns.map(function(ele,index){
					return Object.assign({},ele,{
						width:Math.min(ele.maxWidth||Infinity,Math.max(ele.minWidth||0,columnWidths[index]))
					});
				});
			}
		},
		watch:{
			columns:{
				handler(){
					this.calcColumnWidthFn=utils.getCalcColumnWidthFn(this.columns.map(function(ele){
						return ele.width;
					}));
				},
				deep:true
			}
		},
		methods:{
			/**
			 * 大小改变监听
			 * @param {Object} data 大小信息
			 * @param {Number} data.width 宽
			 * @param {Number} data.height 高
			 */
			$_bear_resizeFn(data){
				const el=this.$el;
				if(el.style.height){
					this.height=data.height;
				}else{
					this.height=0;
				}
				this.width=data.width;
			},
			/**
			 * 列表垂直滚动条改变监听
			 * @param {Boolean} val 是否存在垂直滚动条
			 */
			$_bear_scrollBarChange(val){
				this.yScrollBar=val;
			}
		},
		render(createElement){
			const slot=[];
			if(this.$scopedSlots.header){
				slot.push(createElement('template',{slot:'header'},[createElement('slot',{attrs:{name:'header'}})]));
			}
			if(this.$scopedSlots.footer){
				slot.push(createElement('template',{slot:'footer'},[createElement('slot',{attrs:{name:'footer'}})]));
			}
			return createElement(SizeObserver,{
				class:'bear-TablePowerful',
				on:{
					'bear-resize':this.$_bear_resizeFn
				}
			},[
				createElement(table,{
					props:Object.assign({
						columns:this.calcColumns,
						height:this.height
					},this.$attrs),
					on:Object.assign({
						'y-scroll-bar':this.$_bear_scrollBarChange
					},this.$listeners),
					scopedSlots:this.$scopedSlots,
					ref:'table'
				},slot)
			]);
		}
	};
</script>

<style lang="scss">
	.bear-TablePowerful{
		.ivu-table-body{
			&:not(.ivu-table-overflowY){
				overflow-y:hidden;
			}
			&:not(.ivu-table-overflowX){
				overflow-x:hidden;
			}
		}
		>.ivu-table-wrapper{
			width:100%;
		}
		.ivu-table{
			.ivu-table-body td{
				height:34px;
				font-size:12px;
				color:#333;
			}
			.ivu-table-header thead tr th{
				height:34px;
				padding:0;
				font-size:13px;
				color:#333;
				font-weight:normal;
				text-align:center;
			}
		}
	}
</style>
